<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>孩童信息列表</title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/input-material.css">
    <script src="js/prim/edit.js"></script>
</head>
<body>
<div th:include="head::myhead"></div>
<div class="container">
    <div class="jumbotron" style="margin-top: 5px">
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">姓名</th>
                <th scope="col">性别</th>
                <th scope="col">籍贯</th>
                <th scope="col">添加时间</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <tbody>
                <tr th:each="youth,state : ${youths}">
                    <th scope="row" th:text="${state.count}"></th>
                    <th th:text="${youth.getYouthName()}"></th>
                    <th th:if="${youth.getYouthSex()} == 0">男</th>
                    <th th:if="${youth.getYouthSex()} > 0">女</th>
                    <th th:text="${youth.getYouthPlace()}"></th>
                    <th th:text="${#dates.format(youth.getCreateTime(), 'yyyy-MM-dd')}"></th>
                    <th>
                        <button type="button" th:id="${state.index}" class="btn btn-outline-secondary" onclick="showDialog(this)">
                            查看
                        </button>
                        <button type="button" th:id="${state.index}" class="btn btn-outline-success" onclick="updateDialog(this)">
                            更新
                        </button>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="showInfoModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="showInfoModalCenterTitle">详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div style="display:inline">
                    <label>姓名：</label>
                    <p style="font-weight: bold" id="show_name"></p>
                </div>
                <div style="display:inline">
                    <label>性别：</label>
                    <p style="font-weight: bold" id="show_sex"></p>
                </div>
                <div style="display:inline">
                    <label>民族：</label>
                    <p style="font-weight: bold" id="show_nation"></p>
                </div>
                <div style="display:inline">
                    <label>出生日期：</label>
                    <p style="font-weight: bold" id="show_birth"></p>
                </div>
                <div style="display:inline">
                    <label>身份证号码：</label>
                    <p style="font-weight: bold" id="show_card_id"></p>
                </div>
                <div style="display:inline">
                    <label>居住地址：</label>
                    <p style="font-weight: bold" id="show_address"></p>
                </div>
                <div style="display:inline">
                    <label>籍贯：</label>
                    <p style="font-weight: bold" id="show_place"></p>
                </div>
                <div style="display:inline">
                    <label>父亲身高：</label>
                    <p style="font-weight: bold" id="show_f_height"></p>
                </div>
                <div style="display:inline">
                    <label>母亲身高：</label>
                    <p style="font-weight: bold" id="show_m_height"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="updateInfoModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateInfoModalCenterTitle">信息更新</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input hidden="hidden" id="youthId"/>
                <div>
                    <label>姓名：</label>
                    <br>
                    <input style="font-weight: bold;width: 80%" id="update_name" required/>
                </div>
                <p></p>
                <div>
                    <label>性别：</label>
                    <br>
                    <input disabled style="font-weight: bold;width: 80%" id="update_sex"/>
                </div>
                <p></p>
                <div>
                    <label>民族：</label>
                    <br>
                    <input disabled style="font-weight: bold;width: 80%" id="update_nation"/>
                </div>
                <p></p>
                <div>
                    <label>出生日期：</label>
                    <br>
                    <input disabled style="font-weight: bold;width: 80%" id="update_birth"/>
                </div>
                <p></p>
                <div>
                    <label>身份证号码：</label>
                    <br>
                    <input disabled style="font-weight: bold;width: 80%" id="update_card_id"/>
                </div>
                <p></p>
                <div>
                    <label>居住地址：</label>
                    <br>
<!--                    <textarea id="update_address"/>-->
                    <input style="font-weight: bold;width: 80%" id="update_address" required/>
                </div>
                <p></p>
                <div>
                    <label>籍贯：</label>
                    <br>
                    <input disabled style="font-weight: bold;width: 80%" id="update_place"/>
                </div>
                <p></p>
<!--                <div>-->
<!--                    <label>当前身高：</label>-->
<!--                    <br>-->
<!--                    <input type="number" style="font-weight: bold;width: 80%" id="update_height" required/>-->
<!--                </div>-->
<!--                <p></p>-->
                <div>
                    <label>父亲身高：</label>
                    <br>
                    <input type="number" style="font-weight: bold;width: 80%" id="update_f_height" required/>
                </div>
                <p></p>
                <div>
                    <label>母亲身高：</label>
                    <br>
                    <input type="number" style="font-weight: bold;width: 80%" id="update_m_height" required/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="updateInfo()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<script src="js/prim/list.js"></script>
<script th:inline="javascript">
    function showDialog(obj) {
        var id = $(obj).attr("id");
        var youths = [[${youths}]];
        $("#show_name").html(youths[id].youthName);
        if (youths[id].youthSex > 0) {
            $("#show_sex").html("女");
        }else {
            $("#show_sex").html("男");
        }
        $("#show_nation").html(youths[id].youthNation);
        var date = new Date(youths[id].youthBirth);
        $("#show_birth").html(dateFormat("YYYY-mm-dd", date));
        $("#show_card_id").html(youths[id].youthCardId);
        $("#show_address").html(youths[id].youthAddress);
        $("#show_place").html(youths[id].youthPlace);
        $("#show_f_height").html(youths[id].youthFatherHeight);
        $("#show_m_height").html(youths[id].youthMotherHeight);

        $("#showInfoModalCenter").modal("show");
    }

    function updateDialog(obj) {
        var id = $(obj).attr("id");
        var youths = [[${youths}]];
        $("#youthId").val(youths[id].youthId);
        $("#update_name").val(youths[id].youthName);
        if (youths[id].youthSex > 0) {
            $("#update_sex").val("女");
        }else {
            $("#update_sex").val("男");
        }
        $("#update_nation").val(youths[id].youthNation);
        var date = new Date(youths[id].youthBirth);
        $("#update_birth").val(dateFormat("YYYY-mm-dd", date));
        $("#update_card_id").val(youths[id].youthCardId);
        $("#update_address").val(youths[id].youthAddress);
        $("#update_place").val(youths[id].youthPlace);
        $("#update_f_height").val(youths[id].youthFatherHeight);
        $("#update_m_height").val(youths[id].youthMotherHeight);

        $("#updateInfoModalCenter").modal("show");
    }


</script>
</body>
</html>